<script setup>
// 登录页面
import { ref, reactive, watch,onMounted  } from 'vue'
import { loginApi, loginphoneApi } from '../../api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { useStorage } from '@vueuse/core'
const router = useRouter()
const token = useStorage('token')
const checked1 = ref(false) //记住密码单选框
// 账号密码表单
const ruleFormRef = ref()
const codes = ref() //验证码
const timedoe = ref(30)
const codeshow = ref(true)
// 验证规则
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('手机号不能为空'))
  } else if (value.length !== 11) {
    callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}
const validatePass3 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('验证码不能为空'))
    } else {
      callback()
    }
}
// 账号密码表单
const ruleForm = reactive({
    password: '',
    key: "0AE1A6965F197966793DC1131679835275264",
    code: ""
})
const rules = reactive({
    password: [{ validator: validatePass2, trigger: 'blur' }],
    code: [{ validator: validatePass3, trigger: 'blur' }]
})


const getcode = async function () {
    const msg = await loginphoneApi({
        Phone:ruleForm.password
    })
    if (msg.data.code == 0) {
        ElMessage({
                message: msg.data.msg,
                type: 'success',
             })
    } else {
        ElMessage.error(msg.data.msg)
    }
}
// 获取验证码
const havecode = function () {
    if (ruleForm.password == '' || ruleForm.password.length !== 11) {
        ElMessage.error('请填写正确的手机号')
    } else {
        codeshow.value = false
        let index = setInterval(() => {
                timedoe.value--
            if (timedoe.value <= 0) {
                clearInterval(index)
                codeshow.value = true
                timedoe.value = 30
            }
        }, 1000)
        getcode()
    }
}
// watch(() => timedoe.value, (newval,oldval) => {
//     if (newval == 0) {
//         timedoe.value = 10
//         codeshow.value = true
//         clearInterval
//     }
// })
const push = function () {
  router.push({path:'/index'})
}


// 点击提交
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate(async(valid) => {
    if (valid) {
        // 通过
        const msg = await loginApi({
            Phone: ruleForm.password,
            PhoneCode:ruleForm.code
        })
        if (msg.data.code == 0) {
            ElMessage({
                message: '登录成功成功',
                type: 'success',
            })
              token.value = msg.data.data.token
            router.push({path:'/order/orderinfo'})
        } else {
            ElMessage.error(msg.data.msg)
        }
       
    } else {
      // 验证没有通过
      return false
    }
  })
}

onMounted(() => {
})
</script>
<template>
    <div class="zcld_list">
        <div style="position: absolute;top: 0;left: 0;width: 100%;">
        <div class="top_wel" >
          <div style="font-size: 24px;font-weight: 600;margin-left: 15px;color: #fff;">
            新质回收登录
          </div>
          <div style="margin-right: 15px;">
          <div class="flor topright"><a @click="push"  class="hove">返回首页</a> </div>
          </div>
        </div>
        </div>
        <div class="zcld_list_left" style="background-color: rgba(255, 255, 255, 0.5);box-shadow: 0 0 10px #ccc;">
          <li class="zt24 s32" style="margin-bottom: 52px;">欢迎登录新质回收</li>
          <el-form ref="ruleFormRef" :model="ruleForm"  :rules="rules"  >
              <el-form-item  prop="password">
                  <el-input :validate-event="false" style="height: 42px;line-height: 42px;margin-bottom: 10px;" v-model="ruleForm.password" autocomplete="off" placeholder="请输入您的手机号"/>
              </el-form-item>
                  <el-form-item prop="code" >
                      <el-input :validate-event="false" style="height:42px;line-height: 42px;margin-right:10px;width: 158px;margin-bottom: 10px;" v-model="ruleForm.code"  autocomplete="off" placeholder="请输入验证码">
                      </el-input>
                      <el-button v-if="codeshow" @click="havecode()" style="width: 109px;height:42px;line-height: 42px;background-color: #026AB4;color:#FFF;margin-bottom: 10px;">获取验证码</el-button>
                      <el-button v-if="!codeshow" style="width: 109px;height:42px;line-height: 42px;background-color: #026AB4;color:#FFF;margin-bottom: 10px;">{{ timedoe }}</el-button>
                  </el-form-item>
                  <el-form-item >
                    <el-button @click="submitForm(ruleFormRef)" style="width: 279px;height:47px;line-height: 47px;background-color: #026AB4;color:#FFF">登录</el-button>
                  </el-form-item>
          </el-form>
        </div>
    </div>
<div style="clear:both"></div>
</template>
<style scoped>

</style>